﻿<!DOCTYPE html>
<html>
    <!--
        Copyright (C) 2013-2014 Ralph Becket 
        Released under a variant of the Microsoft Public License -- see ../LICENCE.txt.
        A demonstration of the Rawb controls.
    -->
    <head>
        <title>RawbGrid</title>
        <link rel="stylesheet" href="css/rawb.css" />
    </head>

    <body>

        <h1>Rawb Controls Demo</h1>

        <div style="float: left; border-left: 1px solid black; padding: 0 1em 0 1em">

            <h3>Grid</h3>

            Things to try:
            <ul>
                <li>clicking on a row;</li>
                <li>clicking on a row header;</li>
                <li>ticking a row checkbox;</li>
                <li>resizing a column;</li>
                <li>moving the scrollbars;</li>
                <li>using the mouse-wheel;</li>
                <li>focussing on the grid and using the up/down/page up/page down/home/end keys;</li>
                <li>resizing the grid via the resizing corner.</li>
            </ul>

            <div data-bind="template: { name: 'RawbGridTemplate', data: myGrid }"></div>

            <p data-bind="
                text: (myGrid.selection() ? 'Row ' + myGrid.selection().i : 'No row') + ' selected.'
            "></p>

        </div>

        <div style="float: left; border-left: 1px solid black; padding: 0 1em 0 1em">

            <h3>DropDown</h3>

            Things to try:
            <ul>
                <li>focussing on/off the drop-down input box;</li>
                <li>typing some characters into the input box;</li>
                <li>scrolling the selection in the drop-down list with the scroll-bar, mouse-wheel, or arrow keys;</li>
                <li>hitting Enter or Tab when a drop-down row is selected/not selected;</li>
                <li>hitting Enter or Tab when the drop-down list has only one item.</li>
            </ul>

            <div data-bind="template: { name: 'RawbDropDownTemplate', data: myDropDown }"></div>

        </div>

        <div style="float: left; border-left: 1px solid black; padding: 0 1em 0 1em">

            <h3>ManagedInput</h3>

            Things to try:
            <ul>
                <li>focussing on/off the input box;</li>
                <li>editing the input box contents -- type in various numbers.</li>
            </ul>

            <div data-bind="template: { name: 'RawbManagedInputTemplate', data: myManagedInput }"></div>

        </div>

        <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.debug.js"></script>
        <!--<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>-->
        <script src="js/rawb.loader.js"></script>
        <script src="js/rawb.ui.js"></script>
        <script>

            rawb.loadAndAddHtml("html/rawb.ui.html");
            
            rawb.runAfterLoading(function () {

                myData = ko.observableArray([]);

                var n = 1000;

                for (var i = 0; i < n; i++) {
                    var rad = i * 2 * Math.PI / n;
                    myData.push({
                        i: i + 1,
                        rad: rad,
                        sin: Math.sin(rad),
                        cos: Math.cos(rad),
                        tan: Math.tan(rad),
                        log10: Math.log(i + 1) * Math.LOG10E,
                        date: new Date(new Date().valueOf() - (100000000000 * Math.random())),
                        name: ["Alice", "Bob", "Cissy", "Dick", "Emma"][i % 5],
                        checked: ko.observable(false)
                    });
                }

                var plus = function (x, y) { return 0 + ko.unwrap(x) + ko.unwrap(y); };

                sumCol = function (col) {
                    return ko.computed(function () { 
                        return myData().map(function (x) { return x && x[col]; }).reduce(plus);
                    });
                };

                var fix3 = function (x) { x = ko.unwrap(x); return isFinite(x) ? x.toFixed(3) : ""; };

                var asChecked = function (x) {
                    return { checked: x };
                };

                numChecked = sumCol("checked");

                var centred = "RawbGridCentredTextCellTemplate";
                var rightAligned = "RawbGridRightAlignedTextCellTemplate";

                myGrid = new rawb.Grid({
                    width: 450,
                    height: 340,
                    resizerWidth: 2,
                    leftColumns: [
                        {
                            width: 40, header: "Row",
                            //headerClick: function () { alert("Header click!"); },
                            valueField: "i", valueTemplateID: centred,
                            footer: n,
                            footerClick: function () { alert("Footer click!"); }
                        }
                    ],
                    columns: [
                        {
                            width: 60, header: "rad (2pi/" + n + ")",
                            valueField: "rad", valueFormatter: fix3, valueTemplateID: rightAligned
                        },
                        {
                            width: 60, header: "sin",
                            valueField: "sin", valueFormatter: fix3,
                            footer: sumCol("sin"), footerFormatter: fix3, valueTemplateID: rightAligned
                        },
                        {
                            width: 60, header: "cos",
                            valueField: "cos", valueFormatter: fix3,
                            footer: sumCol("cos"), footerFormatter: fix3, valueTemplateID: rightAligned
                        },
                        {
                            width: 60, header: "tan",
                            valueField: "tan", valueFormatter: fix3, valueTemplateID: rightAligned
                        },
                        {
                            width: 60, header: "log",
                            valueField: "log10", valueFormatter: fix3, valueTemplateID: rightAligned
                        },
                        {
                            width: 120, header: "Date",
                            valueField: "date"
                        },
                        {
                            width: 120, header: "Name",
                            valueField: "name"
                        }
                    ],
                    rightColumns: [
                        {
                            width: 40,
                            valueField: "checked", valueFormatter: undefined, valueTemplateID: "RawbGridCheckboxCellTemplate",
                            footer: numChecked, footerTemplateID: centred
                        }
                    ],
                    click: function (row) {
                        myGrid.selection(row);
                    },
                    data: myData,
                    includeResizingHandle: true,
                    rowsPerStripe: 3
                });

                myDropDown = new rawb.DropDown({
                    width: 200,
                    inputHeight: 24,
                    gridHeight: 100,
                    gridRowHeight: 20,
                    options: [
                        { label: "Alice" },
                        { label: "Aaron" },
                        { label: "Bob" },
                        { label: "Belle" },
                        { label: "Cissy" },
                        { label: "Charles" },
                        { label: "Debby" },
                        { label: "Dilbert" },
                        { label: "Edgar" },
                        { label: "Ethel" }
                    ],
                    fieldName: "label",
                    fetchFn: function () { console.log("[fetchFn]"); }
                });

                myManagedInput = new rawb.ManagedInput({
                    displayFormatter: function (value) {
                        if (!isFinite(value)) return "";
                        var s = value.toFixed(2);
                        for (var i = s.indexOf(".") - 3; 0 < i; i -= 3)
                            s = s.substr(0, i) + "," + s.substr(i);
                        return "$ " + s;
                    },
                    editFormatter: function (value) {
                        return (isFinite(value) ? value.toFixed(2) : "");
                    },
                    parser: function (input) {
                        return (input != "" ? +input : undefined);
                    }
                });

                ko.applyBindings({ myGrid: myGrid, myDropDown: myDropDown, myManagedInput: myManagedInput });

            });

        </script>
    </body>
</html>